<template>
  <div class="page main-page">
    <global-header title="游戏大厅" noBackground>
      <template #left></template>
    </global-header>
    <main class="page-main flex flex-col justify-between">
      <div class="notice"></div>
      <div class="page-main mt-[15px]" ref="mainRef">
        <van-pull-refresh v-model="refresh" @refresh="onRefresh">
          <template v-for="item in gameStore.gameTotal">
            <template v-if="item.CategoryId == GameCategory.sc">
              <sc-card :data="item" @updateStatus="val => (item.Status = val)" />
            </template>
            <template v-if="item.CategoryId == GameCategory.ssc">
              <ssc-card :data="item" @updateStatus="val => (item.Status = val)" />
            </template>
            <template v-if="item.CategoryId == GameCategory.pcdd">
              <pcdd-card :data="item" @updateStatus="val => (item.Status = val)" />
            </template>
            <template v-if="item.CategoryId == GameCategory.lhc">
              <lhc-card :data="item" @updateStatus="val => (item.Status = val)" />
            </template>
            <template v-if="item.CategoryId == GameCategory.ydh">
              <ydh-card :data="item" @updateStatus="val => (item.Status = val)" />
            </template>
          </template>
        </van-pull-refresh>
      </div>
    </main>
    <footer>
      <main-footer />
    </footer>
  </div>
</template>
<route>
  {
    name: "admin-main",
    meta: {
      pageIndex: 1,
    }
  }
</route>
<script setup lang="ts">
import MainFooter from "./components/main-footer.vue";
import ScCard from "./components/game-card/sc.vue";
import SscCard from "./components/game-card/ssc.vue";
import PcddCard from "./components/game-card/pcdd.vue";
import LhcCard from "./components/game-card/lhc.vue";
import YdhCard from "./components/game-card/ydh.vue";

import { useGameStore } from "@/store/modules/game";
import { GameCategory } from "@/enums";
import { useMainPageStore } from "./hooks/useMain";

const mainRef = ref();
const gameStore = useGameStore();
const mainStore = useMainPageStore();
const refresh = ref(false);

const onRefresh = async () => {
  refresh.value = true;
  await gameStore.actionGameTotal().finally(() => {
    refresh.value = false;
  });
};
let timer: any = null;
onMounted(async () => {
  gameStore.actionGameTotal();
  timer = setInterval(() => {
    gameStore.actionGameTotal();
  }, 10000);
  if (mainRef.value) {
    mainRef.value.scrollTop = mainStore.scrollTop;
  }
});

onBeforeUnmount(() => {
  if (mainRef.value) {
    mainStore.scrollTop = mainRef.value.scrollTop;
  }
  clearInterval(timer);
});
</script>
<style scoped lang="scss">
.main-page {
  background: url("@/assets/images/main/bg.png") no-repeat;
  background-size: 100%;
  background-position: center bottom;
}
.notice {
  background-color: #3e7aca;
  margin: 0 15px;
  border-radius: 10px;
  height: 32px;
  margin-top: 20px;
}
:deep() {
  .van-pull-refresh__head {
    --van-pull-refresh-head-text-color: #fff;
    --van-loading-spinner-color: #fff;
    --van-loading-text-color: #fff;
  }
}
</style>
